<template>
	<view class="cart-container" v-if="show_model">

		<xw-empty :isShow="load.status" :type="load.type"></xw-empty>
		<checkbox-group @change="selectItem">
			<view class="item-box" v-for="item in list">
				<view class="edit-btn">
					<uni-icons type="more-filled" size="20" @click="showDelBtn(item.id)"></uni-icons>
				</view>
				<view class="item">
					<view class="l">
						<label>
							<checkbox :value="item.id" :checked="item.check" color="#ff6164"
								style="transform:scale(0.7)" />
						</label>
					</view>

					<view class="c">
						<image mode="widthFix" :src="item.with_product_norm.head"></image>
					</view>

					<view class="r">
						<view class="product">{{item.with_product.title}}</view>
						<view class="norm">{{item.with_product_norm.title}}</view>
						<view class="num">
							<view class="price">
								<text style="font-size:24upx">￥</text>{{item.with_product_norm.price}}
							</view>
							<view>
								<uni-number-box v-model="item.num" :min="item.with_product_norm.min_order"
									:max="item.with_product_norm.max_order" @change="changeNum($event,item.id)" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</checkbox-group>
		<view class="foot-box" v-if="list.length>0">

			<view class="foot">
				<checkbox-group @change="selectAll">
					<view style="display:flex;align-items: center;">

						<label>
							<checkbox :checked="false" color="#ff6164" style="transform:scale(0.7)" />
						</label>
						全部
					</view>
				</checkbox-group>
				<view class="btn-box">
					合计&nbsp;&nbsp;<text class="price"><text style="font-size:24upx">￥</text>{{all_price}}</text>
					<view class="btn" @click="handleBalance()">立即结算</view>
				</view>
			</view>
		</view>

		<!-- 删除弹窗 -->
		<uni-popup ref="popup" type="bottom" background-color="#f5f5f5" class="del-box">
			<view class="btn" style="margin-bottom:20upx;color:red" @click="handleDel">移除商品</view>
			<view class="btn" @click="closeDelBtn">取消</view>
		</uni-popup>
	</view>
</template>

<script>
	import xwEmpty from '@/components/xw-empty/xw-empty';
	export default {

		components: {
			xwEmpty
		},
		data() {
			return {
				del_id: null,
				load: {
					status: false,
					type: 2
				},
				all: true,
				all_price: 0,
				list: [],
				show_model: false
			}
		},
		methods: {

			open() {
				this.getCartList()
				this.show_model = true
			},
			changeNum(e, index) {
				//加入购物车
				this.$myRequest('cart/edit', {
					id: index,
					num: e
				}, "POST").then((res) => {
					if (res.code == 1000) {} else {}
				})
			},
			getCartList() {
				this.$myRequest('cart/list', {}).then((res) => {
					if (res.code == 1000) {
						this.list = res.data.data
						if (this.list.length == 0) {
							this.load.status = true
							this.load.text = "购物车空空如也"
						} else {
							this.load.status = false
						}
					}
				})
			},
			selectItem(e) {
				this.all_price = 0
				this.list.forEach((element, index) => {
					if (e.detail.value.indexOf(element.id.toString()) == -1) {
						this.list[index].check = false
					} else {
						this.all_price += element.with_product_norm.price * element.num
						this.list[index].check = true
					}
				});
			},
			selectAll(e) {
				this.all_price = 0
				if (e.detail.value.length > 0) {
					this.list.forEach((element, index) => {
						this.all_price += element.with_product_norm.price * element.num
						this.list[index].check = true
					});
				} else {
					this.list.forEach((element, index) => {
						this.list[index].check = false
					});
				}
			},
			handleBalance() {
				let bags = [];
				this.list.forEach(element => {
					if (element.check) {
						bags.push({
							"price": element.with_product_norm.price,
							"head": element.with_product_norm.head,
							"num": element.num,
							"product_title": element.with_product.title,
							"product_id": element.with_product.id,
							"product_norm_title": element.with_product_norm.title,
							"product_norm_id": element.with_product_norm.id,
						});
					}
				});
				if (bags.length == 0) {
					uni.showToast({
						title: '请选择产品！',
						icon: 'none',
						duration: 2000,
					})
					return false;
				}
				this.$store.commit('setBags', bags);
				this.$Router.push({
					path: '/pages/balance/balance'
				})
			},

			showDelBtn(id) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.del_id = id
				this.$refs.popup.open('bottom')
			},
			closeDelBtn() {
				this.del_id = null
				this.$refs.popup.close('bottom')
			},
			handleDel() {

				this.$myRequest('cart/delete', {
					id: this.del_id
				}, "POST").then((res) => {
					if (res.code == 1000) {
						let all_price = 0;
						let user_info = this.$store.state.user_info
						user_info.cart_num = res.data.num
						this.$store.commit('setUserInfo', user_info)
						if (user_info.cart_num == 0) {
							//移除红点
							uni.removeTabBarBadge({
								index: 2 // 底部菜单栏的索引（从0开始）
							});
						} else {
							uni.setTabBarBadge({ //显示数字  
								index: 2, //tabbar下标
								text: this.$store.state.user_info.cart_num.toString() //数字
							})
						}
						let d = this.list
						d.forEach((element, index) => {
							if (element.id == this.del_id) {
								this.list.splice(index, 1)
							} else {
								if (element.check == true) {
									all_price += element.with_product_norm.price * element.num
								}
							}
						});
						this.all_price = all_price
						if (this.list.length == 0) {
							this.load.status = true
						} else {
							this.load.status = false
						}
					}
				})
				this.$refs.popup.close('bottom')
			}
		}
	}
</script>
<style>
	.vue-ref {
		padding-bottom: 0 !important;
	}
</style>
<style lang="scss">
	.cart-container {
		min-height: 100%;

		.empty-cart {
			min-height: 100%;
			text-align: center;
			padding-top: 50%;

			image {
				width: 100upx;
				height: 100upx;
			}

			.empty-btn {
				border-radius: 10upx;
				display: inline-block;
				padding: 10upx 40upx;
				border: 1px solid $uni-text-color-disable;
			}
		}

		.item-box {
			background-color: #fff;
			margin: 20upx;
			padding: 20upx 30upx;
			border-radius: 10upx;
			font-size: 28upx;

			.edit-btn {
				text-align: right;
				position: relative;
			}

			.item {
				display: flex;
				align-items: center;

				.l {
					padding-right: 10upx;
				}

				.c {
					padding-right: 10upx;
					border-radius: 20upx;
					width: 160upx;

					image {
						border-radius: 20upx;
						width: 100%;
					}
				}

				.r {
					padding-left: 20upx;
					flex: 1;

					.product {
						font-weight: 600;
						font-size: 32upx;
					}

					.norm {
						margin-top: 20upx;
						background-color: #f5f5f5;
						padding: 10upx 20upx;
						border-radius: 10upx;
						font-size: 24upx;
					}

					.num {
						margin-top: 20upx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.price {
							font-size: 32upx;
							color: $uni-color-error;
							font-weight: 600;
						}
					}
				}
			}
		}

		.del-box {
			text-align: center;

			.btn {
				background-color: #fff;
				height: 100upx;
				line-height: 100upx;
			}
		}

		.foot-box {
			position: relative;
			box-sizing: border-box;
			position: fixed;
			width: 100%;
			bottom: 0;

			.foot {
				display: flex;
				padding-left: 20upx;
				padding-right: 20upx;
				background-color: #fff;
				height: 100upx;
				align-items: center;
				justify-content: space-between;

				.btn-box {
					display: flex;
					align-items: center;
					color: #999;
					font-size: 24upx;

					.price {
						color: $uni-color-error;
						font-size: 36upx;
						font-weight: 600;
					}

					.btn {
						padding: 20upx 30upx;
						margin-left: 20upx;
						font-size: 28upx;
						background-color: $uni-color-team;
						color: $uni-color-green;
						border: none;
						border-radius: 10upx;
					}
				}
			}
		}
	}
</style>